<template>
  <div class="components-container">
    <div>
      <div>
        <div class="layui-inline">
          <!-- <label >区域选择</label> -->
          <div class="layui-inline">
            <el-radio-group size="large" v-model="selectIndex" @change="getAsaData">
              <el-radio-button v-for="(item,index) in asaArea" :key="item.ASAID" :label="index" class="radio">
                <span style="display:block;min-width:100px;">{{item.ASANAME}}</span>
              </el-radio-button>
            </el-radio-group>
          </div>
          <div class="layui-inline">
            <el-button type="primary" class="refresh" size="large" @click="btnOnload">刷新</el-button>
          </div>
        </div>
      </div>
      <div class="tableContainer" style="position:relative;margin-left:auto;">
        <div v-for="y in asaAreaItem.ASAYCOUNT" :style="{width:asaAreaItem.ASAXCOUNT*left+'px',height:top}" style="clear:left;">
          <div v-for="x in asaAreaItem.ASAXCOUNT" class="iceplace iceplacedefault"></div>
        </div>
        <div class="freezerBtn">
            <ul class="tableIceArea" style="position: absolute; left: 0; top: 0;">
              <li v-for="(item, index) in assAreaInfo" :style="{left: (left*(item.ASSXP-1)) + 'px', top: (top*(item.ASSYP-1)) + 'px' }"
                style=" position: absolute;">
                <div class="listCenter" :class="setDivClass(item)" @click="openStotage(item)">
                  <p v-text="item.ASSNO" class="itemNo">0</p>
                  <div class="iceName">
                    {{item.REGNAME}}
                  </div>
                </div>
              </li>
            </ul>
        </div>
      </div>
    </div>
    <!-- 寄存堂 -->
    <el-dialog :visible.sync="stotageVisible" v-if="stotageVisible">
        <div class="freezer" v-if="ass">
          <div class="listCenter">
            <p v-text="ass.ASSNO" class="itemNo">0</p>
            <div class="empty" v-if="ass.AssUse.length === 0">
              <!-- <i class="layui-icon" @click="operate(ice,OPEARTCODE.CR)">&#xe61f;</i> -->
            </div>
            <div class="notempty" v-else-if="ass.AssUse.length > 0">
              <div class="iceName" v-loading="assLoading" element-loading-text="数据获取中">
                    <ul>
                      <li>
                        <label class="ice-label">逝者姓名:</label>
                        <label class="ice-value">{{regData.REGNAME}}</label>
                      </li>
                      <li>
                        <label class="ice-label">死亡日期:</label>
                        <label class="ice-value">{{regData.REGDEATHDATE}}</label>
                      </li>
                      <li>
                        <label class="ice-label">经办家属:</label>
                        <label class="ice-value">{{regData.REGHANDLERNAME}}</label>
                      </li>
                      <li>
                        <label class="ice-label">联系电话:</label>
                        <label class="ice-value">{{regData.REGHANDLERLINK}}</label>
                      </li>
                      <li>
                        <label class="ice-label">开始时间:</label>
                        <label class="ice-value">{{ashData.ASHBEGDATE}}</label>
                      </li>
                      <li>
                        <label class="ice-label">结束时间:</label>
                        <label class="ice-value">{{ashData.ASHENDDATE}}</label>
                      </li>
                    </ul>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <div style="zoom:130%;margin:auto;" class="layui-btn-group">
            <button class="layui-btn layui-btn-lg layui-btn-normal" 
              @click="operate(ass,OPEARTCODE.KSSY)" v-if="ass.AssUse.length === 0">
              <i class="layui-icon">&#xe62f;</i>
              <span>开始使用</span>
            </button>
            <button class="layui-btn layui-btn-lg layui-btn-normal" 
              @click="operate(ass,OPEARTCODE.JSSY)"  v-if="ass.AssUse.length > 0">
              <i class="layui-icon">&#xe601;</i>
              <span>结束使用</span>
            </button>
            <button class="layui-btn layui-btn-lg layui-btn-normal" 
              @click="operate(ass,OPEARTCODE.SYXC)"  v-if="ass.AssUse.length > 0">
              <i class="layui-icon">&#xe61f;</i>
              <span>使用续存</span>
            </button>
            <button class="layui-btn layui-btn-lg layui-btn-danger" 
              @click="operate(ass,OPEARTCODE.SC)"  v-if="ass.AssUse.length > 0">
              <i class="layui-icon">&#xe640;</i>
              <span>删 除</span>
            </button>
          </div>
        </div>
    </el-dialog>
    <storagePop @refresh="btnOnload" ref="storagePop"></storagePop>
  </div>
</template>
<style lang="less" scoped>
.refresh {
  margin-left: 40px;
  margin-top: -6px;
}

.longtext {
  width: 480px;
}

.btnCenter {
  text-align: center;
}

table.tableIfon {
  th {
    font-weight: normal;
  }
  td {
    text-align: left;
    padding-right: 20px;
  }
}

select::-ms-expand {
  //ie下啦箭头隐藏
  display: none;
}

select.nameOptions {
  width: 100px;
  display: inline-block;
  margin-right: 10px;
  background: transparent;
  border: none;
  box-shadow: inset 0 0px 0px rgb(255, 255, 255);
  margin: auto;
  display: block;
  text-align-last: center;
}

.datepicker-popup {
  position: fixed !important;
}

table.iceTable {
  width: 100%;
  td {
    width: 50px;
    height: 200px;
    border: 1px solid #dcdcdc;
  }
}

div.tableContainer {
  width: 100%;
  max-height: 680px;
  overflow: auto;
  margin-top: 20px;
  ul.tableIceArea {
    width: 100%;
    height: 100%;
    li {
      width: 180px;
      height: 180px;
      div.listCenter {
        p.itemNo {
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
        div.iceName {
          height: 40px;
          width: 100%;
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
      }
    }
  }
}

.linkdisable {
  background: #eef1f6;
  color: #878d99;
  cursor: not-allowed;
}

.iceplace {
  margin: 5px;
  width: 180px;
  height: 180px;
  float: left;
}

.iceplacedefault {
  background-color: #878d99;
}

.iceplaceCanuse {
  background-color: #67c23a;
}

.iceplaceUseed {
  background-color: #eb9e05;
}

.iceplaceMoreUseed {
  background-color: #fa5555;
}

div.freezer {
  text-align: center;
  div.listCenter {
    margin: auto;
    width: 100%;
    height: 400px;
    position: relative;
    .empty {
      text-align: center;
      color: #409eff;
      line-height: 400px;
      i {
        font-size: 150px;
      }
      i:active {
        color: #909399;
      }
    }
    p.itemNo {
      text-align: center;
      padding-top: 10px;
      font-size: 50px;
      color: #409eff;
      font-weight: bold;
    }
    div.iceNo {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    div.iceName {
      height: 200px;
      width: 100%;
      text-align: center;
      padding-top: 15px;
      font-size: 18px;
      font-weight: bold;
      .ice-label {
        text-align: right;
        width: 100px;
      }
      .ice-value {
        text-align: left;
        margin-left: 10px;
        min-width: 100px;
      }
    }
    div.tableToolList {
      overflow: hidden;
      ul.tableTool {
        width: 90px;
        margin: 10px auto 0;
        overflow: hidden;
        height: 30px;
        li {
          float: left;
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          padding: 0;
          margin: 0;
          cursor: pointer;
          position: inherit;
        }
        li.saveBtn {
          background: #009289;
          color: white;
        }
        li.takeBtn {
          // background: #eaeaea;
          background: #ff2021;
          color: white;
        }
        li.takeBtnEnadble {
          // background: #eaeaea;
          background: #eef1f6;
          color: #878d99;
          cursor: not-allowed;
        }
        li.moreBtn {
          background: #ef9000;
          color: white;
          span.el-dropdown-link {
            color: white;
          }
        }
      }
    }
  }
}
</style>
<script>
import apiBase from "@/api/apiBase.js";
import storagePop from "./storagePop";

export default {
  name: "storage",
  data() {
    return {
      OPEARTCODE: {
        KSSY: "开始使用",
        JSSY: "结束使用",
        SYXC: "使用续存",
        SC: "删除"
      },
      left: "190",
      top: "190",
      selectIndex: 0,
      asaArea: [],
      asaAreaItem: {},
      assAreaInfo: [],
      ass: {},
      stotageVisible: false,
      assLoading: false,
      regData: {},
      ashData: {}
    };
  },

  methods: {
    //获取寄存区域
    getAsaArea() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Ashes.QueryAshesArea,
        res => {
          this.asaArea = res.data.content.OutData;
          if (!this.asaArea && this.asaArea.length === 0)
            this.selectIndex = null;
          this.getAsaData();
        }
      );
    },
    //获取寄存堂及使用信息
    getAsaData() {
      if (
        this.selectIndex === null ||
        this.asaArea === undefined ||
        this.asaArea.length === 0
      )
        return;
      this.asaAreaItem = this.asaArea[this.selectIndex];
      let data = {
        //请求体
        ASAID: this.asaAreaItem.ASAID
      };

      apiBase.DoService(
        data,
        apiBase.getApiAdress().Ashes.QueryAshesUseByArea,
        res => {
          this.assAreaInfo = res.data.content;
          this.assAreaInfo.forEach((item, index) => {
            if (item.AssUse !== undefined && item.AssUse.length > 0)
              item.REGNAME = item.AssUse[0].REGNAME;
            else item.REGNAME = "";
          });
          if (this.ass) {
            this.getAss(this.ass.ASSID);
          }
        }
      );
    },
    //删除
    dataDelete() {
      this.$confirm("确认是否删除该寄存堂使用信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(callback => {
          var data = {
            ASHID: this.ashData.ASHID
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().AshesUse.Delete,
            res => {
              this.btnOnload();
              this.$message({
                message: "删除成功",
                type: "success"
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getReg() {
      if (this.ass.AssUse && this.ass.AssUse.length > 0) {
        let data = {
          REGBUSNUM: this.ass.AssUse[0].REGBUSNUM,
          ASHASSID: this.ass.ASSID
        };
        this.assLoading = true;
        apiBase.DoService(
          data,
          apiBase.getApiAdress().AshesUse.GetRegistrationAndUseByNo,
          res => {
            console.log(res.data.content);
            var data = res.data.content;
            this.ashData = data.ASH;
            this.regData = data.REG;
            this.assLoading = false;
          },
          res => {
            this.$message.error(res.data.msg);
            this.assLoading = false;
          }
        );
      }
    },
    openStotage(ass) {
      this.ass = ass;
      this.getReg();
      this.$nextTick(function() {
        this.stotageVisible = true;
      });
    },
    //操作
    operate(ass, order) {
      switch (order) {
        case this.OPEARTCODE.KSSY:
          this.$refs.storagePop.open(ass, order);
          break;
        case this.OPEARTCODE.JSSY:
          this.$refs.storagePop.open(ass, order);
          break;
        case this.OPEARTCODE.SYXC:
          this.$refs.storagePop.open(ass, order);
          break;
        case this.OPEARTCODE.SC:
          this.dataDelete();
          break;
        default:
      }
    },
    //div颜色
    setDivClass(ass) {
      if (!ass) return "";
      if (!ass.AssUse || ass.AssUse.length === 0)
        return "iceplace iceplaceCanuse";
      else if (ass.AssUse.length === 1) return "iceplace iceplaceUseed";
      else if (ass.AssUse.length > 1) return "iceplace iceplaceMoreUseed";
    },
    //刷新
    btnOnload() {
      this.getAsaData();
      this.getReg();
    },
    //根据assID获取ass
    getAss(id) {
      for (let ass of this.assAreaInfo) {
        if (ass.ASSID === id) {
          this.ass = ass;
          this.getReg();
          return;
        }
      }
    }
  },
  mounted() {},

  created() {
    this.getAsaArea();
  },
  watch: {},

  components: {
    storagePop
  }
};
</script>
